<template>
	<div>
		<el-row :gutter="24">
		  
		  <el-col :span="6" :offset="2"><el-button @click="add()">增加用户</el-button></el-col>
		</el-row>
		<userlist :userdata="tableData"></userlist>
		<div  @click="showall()">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			 :current-page.sync="currentPage"
				:page-sizes="[8]" :page-size="8" layout="total, sizes, prev, pager, next, jumper"
				:total="maxpage"
				>
			</el-pagination>
		</div>
		<el-dialog title="添加账号" :visible.sync="dialogFormVisible" :append-to-body="true">
		  <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
		  <el-form :model="form">
		    <el-form-item label="账号名字" :label-width="formLabelWidth">
		      <el-input v-model="user.usname" auto-complete="off"></el-input>
		    </el-form-item>
			<el-form-item label="密码" :label-width="formLabelWidth">
			  <el-input v-model="user.uspass" auto-complete="off"></el-input>
			</el-form-item>
		    <el-form-item label="手机号" :label-width="formLabelWidth">
		      <el-input v-model="user.usphone" auto-complete="off"></el-input>
		    </el-form-item>
		    <el-form-item label="身份证号" :label-width="formLabelWidth">
		      <el-input v-model="user.uscard" auto-complete="off"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="cancel">取 消</el-button>
		    <!-- 设置触发更新的方法 -->
		    <el-button type="primary" @click="update">确 定</el-button>
		  </div>
		</el-dialog>
	
	</div>
</template>

<script>
	var _this;
	import userlist from '../components/useelist/userlist.vue';
	export default {
		created() {
			_this = this;
			this.countpage();
			this.showall();
		},
		data() {
			return {
				form: {},
				dialogFormVisible: false,
				formLabelWidth: "100px",
				tableData: [],
				currentPage: 1,
				maxpage:1,
				user:{
					usname:'',
					usphone:'',
					uscard:'',
					uspass:''	
				}		
			}
		},
		methods: {
		add() {
		    //   设置点击按钮之后进行显示对话框
		    this.dialogFormVisible = true;
		  },
		  update() {
		    //   this.form.date = reformat(this.form.date);
		    //    可以在html上面进行设置日期的格式化
		    //   将我们添加的信息提交到总数据里面
		    console.log(this.user);
		var name=_this.$axios.post("/user/checkname",{name:this.user.usname});
		var phone=_this.$axios.post("/user/checkphone",{phone:this.user.usphone});
		var card=_this.$axios.post("/user/checkcard",{card:this.user.uscard});
		_this.$axios.all([name,phone,card])
		.then(
		_this.$axios.spread(
		function(result1,result2,result3){
			if(result1.data=="error"){
				alert("用户名不能重复");
			}
			if(result2.data=="error"){
				alert("手机号不能重复");
			}
			if(result3.data=="error"){
				alert("身份证号不能重复");
			}
		}
		)
		)
			 _this.$axios.post(
				"/user/insert",
				{"usname":this.user.usname,"usphone":this.user.usphone,"uscard":this.user.uscard,"uspass":this.user.uspass}
			)
			.then(function(param) {
				console.log(param.data)
			})
			.catch(function(err) {
				console.log(err)
			}) 
			this.user.uscard="";
			this.user.usname="";
			this.user.uspass="";
			this.user.usphone="";
		    this.dialogFormVisible = false;
			
		  },
		  cancel() {
			  this.user.uscard="";
			  this.user.usname="";
			  this.user.uspass="";
			  this.user.usphone="";
		    // 取消的时候直接设置对话框不可见即可
		    this.dialogFormVisible = false;
		  },
		
			showall() {
				//进入后台查--->axios
				_this.$axios.post(
						"/user/all?page=" + this.currentPage, {}
						//console.log(this.currentPage)
					)
					.then(function(param) {
						console.log("返回值")
						console.log(param)
						_this.tableData = param.data
					})
					.catch(function(err) {
						console.log(err)
					})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			countpage(){
				_this.$axios.post(
				"/user/count"
				)
				.then(function(param){
					_this.maxpage=param.data
					console.log(_this.maxpage)
				})
				.catch(function(err) {
					console.log(err)
				})
			}

		},
		components: {
			userlist
		}
	}
</script>

<style>
</style>
